@import "../base"

.MenuContent
  display: flex
  flex-direction: column
  background: rgb(28, 28, 28)
  text-align: center
  font-size: $font_size*1.6
  padding: 20px 0 50px 0
  color: $font_color_title

  .first
    display: flex
    flex-direction: row
    justify-content: center
    align-items: center
    text-align: center

    li
      display: block
      min-width: 260px

      &:hover
        ul
          display: block

      ul
        display: none
        position: absolute

      span
        display: block
        width: 100%
        text-align: center
        color: $font_color_title
        padding-top: 10px
        padding-bottom: 10px

        &:hover
          background: #6f8fa9


  .second
    position: absolute
    display: flex
    flex-direction: column
    font-size: $font_size*1.1
    z-index: 1

    li
      display: block
      border-radius: 2px
      width: 100%
      background: #2a2a2a

    a
      display: block

      span
        display: block
        width: 100%
        text-align: center
        color: $font_color_title

        &:hover
          color: #6a8edc
          background: #3f3f3f

  .login_btn
    font-size: $font_size
    color: #5b5b5b
    font-family: Sans-serif, serif

    &:hover
      box-shadow: 2px 2px 10px 6px rgb(68, 84, 98)
      background: #1a1a1a
